<template>
  <div>
    <h2 style="margin:20px 20px 20px 0">{{$route.meta.title}}:</h2>
    <el-tabs type="border-card">
      <el-tab-pane label="账户查询">
        <h2>
          <span>
            可用余额:
            <strong>{{accountInfo.useNum}}</strong>
          </span>
          <span>
            提现中余额：
            <strong>{{accountInfo.withNum}}</strong>
          </span>
          <span>
            冻结资金：
            <strong>{{accountInfo.frozenNum}}</strong>
          </span>
        </h2>
      </el-tab-pane>
      <el-tab-pane label="财务明细">
        <el-table :data="tableData" stripe style="width: 100%" border>
          <el-table-column prop="detailNo" label="订单编号" width="180"></el-table-column>
          <el-table-column label="变动类型" width="180">
            <template v-slot="{ row }">
              <span>{{ changeType[row.changeType]}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="changeNum" label="变动金额"></el-table-column>
          <el-table-column label="增减类型">
            <template v-slot="{ row }">
              <span>{{ addSubType[row.addSubType]}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="changeBeforeNum" label="变动之前余额"></el-table-column>
          <el-table-column prop="changeAfterNum" label="变动之后余额"></el-table-column>
          <el-table-column prop="create_time" label="创建时间"></el-table-column>
          <!-- <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button size="mini" type="primary" @click="open(row)">禁用</el-button>
              <el-button size="mini" type="primary" @click="update(row)">修改</el-button>
              <el-button size="mini" type="danger" @click="del(row)">删除</el-button>
            </template>
          </el-table-column>-->
        </el-table>
        
        <div class="dis-center">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="pageInfo.page"
            :page-size.sync="pageInfo.size"
            layout="prev, pager, next, jumper"
            :total="pageInfo.total"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="line-to"></div>

    <!-- <div>
      <el-input v-model="merchantName" placeholder="请输入商家账号" size="small" class="input"></el-input>
      <el-button type="primary" size="small">查询商家</el-button>
    </div>
    <el-table :data="tableData" stripe style="width: 100%" border>
      <el-table-column prop="ip" label="登录IP" width="180"></el-table-column>
      <el-table-column prop="date" label="登录时间" width="180"></el-table-column>
      <el-table-column prop="companyName" label="公司名称"></el-table-column>
      <el-table-column prop="companyType" label="公司类型"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button size="mini" type="primary" @click="open(row)">禁用</el-button>
          <el-button size="mini" type="primary" @click="update(row)">修改</el-button>
          <el-button size="mini" type="danger" @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>-->
  </div>
</template>

<script>
import { getUserAccount } from "@/api/accountManage";
import { listAccDetail, listWithMerChant } from "@/api/financeManage";
const changeType = {
  1: "代付提现",
  2: "手续费",
  3: "拒绝审核退款",
  4: "订单入款"
};
const addSubType = {
  1: "增加",
  2: "减少"
};
export default {
  data() {
    return {
      changeType,
      addSubType,
      merchantName: "",
      pageInfo: {
        page: 1,
        size: 10
      },
      accountInfo: {
        useNum: 0,
        withNum: 0,
        frozenNum: 0
      },
      tableData: []
    };
  },
  methods: {
    fetData() {
      getUserAccount().then(res => {
        if (res.data.code === 200) {
          this.accountInfo = res.data.data;
        }
      });
    },
    getListAccDetail() {
      listAccDetail().then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
          this.pageInfo = res.data.pageInfo;
        }
      });
    },
    handleCurrentChange(val) {
      listAccDetail({
        page: val
      }).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
          this.pageInfo = res.data.pageInfo;
        }
      });
    },
    open(row) {},
    update(row) {},
    del(row) {}
  },
  created() {
    this.fetData();
    this.getListAccDetail()
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../styles/norlize.scss";

.input {
  width: 200px;
  margin: 0 10px 20px 0;
}

h2 {
  margin: 20px 20px 60px 20px;

  span {
    margin: 0 25px 0 0;
  }

  strong {
    font-size: 1.5em;
  }
}
</style>